<template>
  <div ref="print" class="model-container Details">
    <div class="listName">
      <span>修改订单</span>
      <div class="no-print">
        <el-button size="small" type="primary" plain @click="goBack">返回</el-button>
        <!--<el-button size="small" type="primary" plain @click="print">打印</el-button>-->
      </div>
    </div>

    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">买家信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">会员账号：</div>
            <div class="order_text">{{ orderArr.member.nickName }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">联系电话：</div>
            <div class="order_text">{{ orderArr.member.mobilePhone }}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card>
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">订单信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单编号：</div>
            <div class="order_text">{{ orderArr.orderNo }}</div>
          </el-col>
          <!--<el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">-->
          <!--<div class="order_name">支付方式：</div>-->
          <!--<div class="order_text">{{ payTypeVal(orderArr.payType) }}</div>-->
          <!--</el-col>-->
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">商品总积分：</div>
            <div class="order_text">{{ orderArr.integral }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">下单时间：</div>
            <div class="order_text">{{ orderArr.createTime }}</div>
          </el-col>
          <!--<el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">-->
          <!--<div class="order_name">是否开发票：</div>-->
          <!--<div class="order_text">{{ orderArr.isNeedInvoice }}</div>-->
          <!--</el-col>-->
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单应付积分：</div>
            <div class="order_text">{{ orderArr.integral }}</div>
          </el-col>
          <!--<el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">-->
          <!--<div class="order_name">订单实付金额：</div>-->
          <!--<div class="order_text">{{ orderArr.realPaid }}</div>-->
          <!--</el-col>-->
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单状态：</div>
            <div class="order_text">{{ orderStatusVal(orderArr.orderStatus) }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">配送状态：</div>
            <div class="order_text">{{ deliveryStatusVal(orderArr.deliveryStatus) }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">配送费用：</div>
            <div class="order_text">{{ orderArr.deliveryFee }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">买家留言：</div>
            <div class="order_text">{{ orderArr.buyerMemo }}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card v-if="orderArr.orderPackage !== null">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">物流信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">物流单号：</div>
            <div class="order_text">{{ orderArr.orderPackage.waybillNo }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">物流公司：</div>
            <div class="order_text">{{ orderArr.orderPackage.logisticsCompName }}</div>
          </el-col>

        </el-row>
      </div>
    </el-card>

    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">订单商品</div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!orderArr.orderItems" :stripe="true" :data="orderArr.orderItems" empty-text="暂无数据">

          <el-table-column align="center" prop="orderItemId" label="商品编号"/>

          <el-table-column align="center" label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" width="50px" height="50px">
            </template>
          </el-table-column>

          <el-table-column align="center" prop="itemName" label="商品名称"/>

          <el-table-column align="center" label="商品规格">
            <template slot-scope="scope">{{ scope.row.skuName }},{{ scope.row.skuSalesProps }}</template>
          </el-table-column>

          <el-table-column align="center" prop="brandName" label="品牌"/>

          <el-table-column align="center" prop="quantity" label="数量"/>

          <el-table-column align="center" prop="price" label="商品单价"/>

          <el-table-column align="center" prop="barcode" label="条形码"/>

        </el-table>
      </div>
    </el-card>

    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">配送信息</div>
      </div>
      <div class="cardbody">
        <el-form label-width="20%">
          <el-row :gutter="10">
            <el-col :xl="6" :lg="6" :md="12" :sm="12" >
              <el-form-item label="姓名" prop="contactPerson">
                <el-input v-model="dialogBindData.contactPerson" size="small" type="text" placeholder="请输入姓名"/>
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="12" >
              <el-form-item label="联系方式" prop="contactMobile">
                <el-input v-model="dialogBindData.contactMobile" size="small" type="text" placeholder="请输入联系方式"/>
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="12" >
              <el-form-item label="邮政编码" prop="postCode">
                <el-input v-model="dialogBindData.postCode" size="small" type="text" placeholder="请输入邮政编码"/>
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="12" >
              <el-form-item label="收货地址" prop="fullAddr">
                <el-input v-model="dialogBindData.fullAddr" size="small" type="text" placeholder="请输入收货地址"/>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="cardfooter">
            <el-button type="primary" size="mini" plain @click="submmitFun">保存</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as order from '../../api/order'
export default {
  data() {
    return {
      // 列表数据
      orderArr: null,
      dialogBindData: {
        addrId: null,
        postCode: '',
        contactMobile: '',
        contactPerson: '',
        fullAddr: ''
      }
    }
  },
  beforeMount() {
    this.orderArr = this.$route.params.order
    this.reBindData(this.orderArr.orderAddress)
  },
  methods: {
    submmitFun() {
      const param = {
        addrId: this.orderArr.orderAddress.addrId,
        postCode: this.dialogBindData.postCode,
        contactMobile: this.dialogBindData.contactMobile,
        contactPerson: this.dialogBindData.contactPerson,
        fullAddr: this.dialogBindData.fullAddr
      }
      order.editorOrderList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
          return false
        }
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        this.goBack()
      })
    },
    // 反显
    reBindData(data) {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = data[key]
      }
    },
    goBack() {
      const  flag = true;
      sessionStorage.setItem('flag', JSON.stringify(flag))
      this.$router.go(-1)
    },
    print() {
      this.$print(this.$refs.print)
    },
    // 支付方式
    payTypeVal(type) {
      if (type === 1) {
        return '消费积分支付'
      } else if (type === 2) {
        return '余额支付'
      }
    },
    // 支付状态
    payStatusVal(type) {
      if (type === 0) {
        return '未支付'
      } else if (type === 1) {
        return '已支付'
      } else if (type === 2) {
        return '部分支付'
      }
    },
    // 配送状态
    deliveryStatusVal(type) {
      if (type === 0) {
        return '待备货'
      } else if (type === 1) {
        return '备货中'
      } else if (type === 2) {
        return '已出库'
      } else if (type === 3) {
        return '已发货'
      }
    },
    // 配送方式
    deliveryTypeVal(type) {
      if (type === 1) {
        return '快递'
      } else if (type === 2) {
        return '平邮'
      } else if (type === 3) {
        return 'EMS'
      } else if (type === 4) {
        return '上门自提'
      }
    },
    // 订单状态
    orderStatusVal(type) {
      if (type === 0) {
        return '新提交'
      } else if (type === 1) {
        return '待支付'
      } else if (type === 2) {
        return '待发货'
      } else if (type === 3) {
        return '待收货'
      } else if (type === 4) {
        return '已收货'
      } else if (type === 5) {
        return '已完成'
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
  .cardbody{
    padding: 20px;
    .input-name{
      line-height: 40px;
    }
  }
</style>
